<template>
    <div class="child-section">
        <Header>
            <div class="main">
				<van-form @submit="onSubmit" :scroll-to-error='true' :show-error-message='false'>
					<div class="module">
						<h3>企业基本信息</h3>
						<!-- <van-field
						  v-model="comData.qymc"
						  name="企业名称"
						  label="企业名称"
						  @blur='qymChange'
						  required
						  clearable
						  placeholder="请填写企业名称"
						  :rules="[{ required: true, message: '请填写企业名称' }]"
						/> -->
						<van-field
						  readonly
						  clickable
						  required
						  name="qymc"
						  :value="comData.qymc"
						  label="企业名称"
						  placeholder="请选择企业名称"
						  :rules="[{ required: true, message: '请选择企业名称' }]"
						  @click="showPicker = true"
						/>
						<van-popup v-model="showPicker" position="bottom" @close='onCancel'>
						  <van-search v-model="searchValue" placeholder="请输入企业名称关键词" @input="searchInput" />
						  <van-picker
						    show-toolbar
							:columns="columns"
							@confirm="onConfirm"
							@cancel="onCancel"
						  />
						</van-popup>
						<van-field
						  v-model="comData.shtyxydm"
						  name="shtyxydm"
						  label="信用代码"
						  required
						  clearable
						  placeholder="请填写统一社会信用代码"
						  :rules="[{ required: true, message: '请填写统一社会信用代码' }]"
						/>
						<van-field
						  v-model="comData.fddbr"
						  label="法人姓名"
						  clearable
						  placeholder="请填写法人姓名"
						/>
						<van-field
						  v-model="comData.age"
						  name="age"
						  label="法人年龄"
						  required
						  clearable
						  type='number'
						  placeholder="请填写法人年龄"
						  :rules="[{ required: true, message: '请填写法人年龄' }]"
						/>
					</div>
					<div class="module">
						<h3>问卷信息</h3>
						<div class="selection">
							<h4>1.去年累计利润总额</h4>
							<van-radio-group v-model="comData.qnljlrze">
							  <van-radio :name="item.name" v-for="item,index in lrOptions" :key="index">{{item.label}}</van-radio>
							</van-radio-group>
						</div>
						<div class="selection">
							<h4>2.去年销售收入</h4>
							<van-radio-group v-model="comData.qnxssr">
							  <van-radio :name="item.name" v-for="item,index in srOptions" :key="index">{{item.label}}</van-radio>
							</van-radio-group>
						</div>
						<div class="selection">
							<h4>3.去年纳税总额</h4>
							<van-radio-group v-model="comData.qnnsze">
							  <van-radio :name="item.name" v-for="item,index in nsOptions" :key="index">{{item.label}}</van-radio>
							</van-radio-group>
						</div>
						<div class="selection">
							<h4>4.去年资产总额</h4>
							<van-radio-group v-model="comData.qnzcze">
							  <van-radio :name="item.name" v-for="item,index in zcOptions" :key="index">{{item.label}}</van-radio>
							</van-radio-group>
						</div>
						<div class="selection">
							<h4>5.企业贷款余额（非按揭）</h4>
							<van-radio-group v-model="comData.qydkyefaj">
							  <van-radio :name="item.name" v-for="item,index in yeOptions" :key="index">{{item.label}}</van-radio>
							</van-radio-group>
						</div>
						<div class="selection">
							<h4>6.未来24个月企业还款总额（按揭）</h4>
							<van-radio-group v-model="comData.wloyhkzeaj">
							  <van-radio :name="item.name" v-for="item,index in hkOptions" :key="index">{{item.label}}</van-radio>
							</van-radio-group>
						</div>
						<div class="selection">
							<h4>7.贷款用途</h4>
							<van-radio-group v-model="comData.dkyt">
							  <van-radio :name="item.name" v-for="item,index in ytOptions" :key="index">{{item.label}}</van-radio>
							</van-radio-group>
							<van-field v-if="comData.dkyt === lastDkyt" v-model="comData.qtdkyt" name="贷款用途"  placeholder="请填写贷款用途" required clearable :rules="[{ required: true, message: '请填写贷款用途' }]" />
						</div>
						<van-button round block type="info" native-type="submit">提交</van-button>
					</div>
				</van-form>
				<van-overlay :show="show">
					<div class="wrapper">
						<div class="block">
							<p>请正确填写企业基本信息和问卷信息，并保证信息填写的真实性，否则将影响授信预估额度的准确性！</p>
							<van-button round block type="info" @click="show = false">知道了</van-button>
						</div>
				    </div>
				</van-overlay>
			</div>
        </Header>
    </div>
</template>

<script>
import Header from "../../components/header.vue";
import {submitQuestnrInfo,dictGrid,getCompanyNamesByLikeName,getCompanyInfoByName} from '../../request/api.js'
import { Notify,Toast } from 'vant';
import _ from 'lodash'
export default {
    name:'child',
    components: {
        Header
    },
    data() {
        return {
			show:true,
			comData:{
				qymc:undefined,
				shtyxydm:undefined,
				fddbr:undefined,
				age:undefined,
				qnljlrze:undefined,
				qnxssr:undefined,
				qnnsze:undefined,
				qnzcze:undefined,
				qydkyefaj:undefined,
				wloyhkzeaj:undefined,
				dkyt:undefined,
				qtdkyt:undefined
			},
			showPicker:false,
			columns:[],
			searchValue:undefined,
			isFind:true,
			lastDkyt:'',
			lrOptions:[],
			srOptions:[],
			nsOptions:[],
			zcOptions:[],
			yeOptions:[],
			hkOptions:[],
			ytOptions:[],
			pattern1: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
			pattern2: /^1[3|4|5|7|8]\d{9}$/,
        }
    },
	created() {
		dictGrid({code:'QNLJLRZE'}).then(res=>{
			this.lrOptions = res.data.map(item=>{
				return {name:item.fieldCode,label:item.fieldName}
			})
		})
		dictGrid({code:'QNXSSR'}).then(res=>{
			this.srOptions = res.data.map(item=>{
				return {name:item.fieldCode,label:item.fieldName}
			})
		})
		dictGrid({code:'QNNSZE'}).then(res=>{
			this.nsOptions = res.data.map(item=>{
				return {name:item.fieldCode,label:item.fieldName}
			})
		})
		dictGrid({code:'QNZCZE'}).then(res=>{
			this.zcOptions = res.data.map(item=>{
				return {name:item.fieldCode,label:item.fieldName}
			})
		})
		dictGrid({code:'QYDKYEFAJ'}).then(res=>{
			this.yeOptions = res.data.map(item=>{
				return {name:item.fieldCode,label:item.fieldName}
			})
		})
		dictGrid({code:'WLOYHKZEAJ'}).then(res=>{
			this.hkOptions = res.data.map(item=>{
				return {name:item.fieldCode,label:item.fieldName}
			})
		})
		dictGrid({code:'DKYT'}).then(res=>{
			this.ytOptions = res.data.map(item=>{
				return {name:item.fieldCode,label:item.fieldName}
			})
			let len = res.data.length;
			this.lastDkyt = res.data[len-1].fieldCode;
		})
	},
    methods: {
		searchInput(val){
			let inputVal = val.replace(/\s*/g,"");
			this.searchValue = inputVal;
			if(!inputVal){
				this.columns = [];
			}else{
				this.getRemote(inputVal);
			}
		},
		//防抖
		getRemote: _.debounce(function (inputVal) {
			this.search(inputVal);
		}, 2000),
		//根据输入内容模糊查询企业名称
		search(qymc){
			getCompanyNamesByLikeName({name: qymc}).then(res=>{
				if(res.status){
					this.columns = res.data.map(item=>item.ENTNAME);
				}
			})
		},
		onConfirm(val){
			this.comData.qymc = val;
			this.searchValue = undefined;
			this.columns = [];
			this.showPicker = false;
			//根据企业名称查询社会统一信用代码
			getCompanyInfoByName({name:val}).then(res=>{
				if(res.status){
					this.comData.shtyxydm = res.data.creditcode;
				}else{
					Toast(res.msg)
				}
			})
		},
		onCancel(){
			this.searchValue = undefined;
			this.columns = [];
			this.showPicker = false;
		},
		onSubmit(){
			let params = this.comData;
			if(this.comData.dkyt !== this.lastDkyt){
				this.comData.qtdkyt = undefined;
				params.qtdkyt = undefined;
			}
			params.age = Number(params.age);
			submitQuestnrInfo(params).then(res=>{
				if(res.code == '1001'){
					if(res.data.sxyged == '0-0'){
						Notify({ type: 'danger', message: '很抱歉，您的企业暂不符合要求' });
					}else{
						let query = {
							qymc:params.qymc,
							shtyxydm:params.shtyxydm,
							fddbr:params.fddbr,
							age:params.age,
							sxyged:res.data.sxyged
						}
						this.$router.push({
							path:"/check",
							query
						})
					}
				}else if(res.code == '1000'){
					Notify({ type: 'danger', message: res.msg });
				}else{
					Notify({ type: 'danger', message: res.msg });
				}
			})
		}
    }
}
</script>
<style scoped lang="scss">
.main{
	width: 10rem;
	background: #083bb9;
	padding: 0 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.module{
		width: calc(10rem - 40px);
		padding: 0.133333rem 0.133333rem;
		border-radius: 0.066666rem;
		margin-bottom: 0.133333rem;
		background-color: #fff;
		h3{
			margin: 0.133333rem 0 0.133333rem 0.133333rem;
			font-size: 32px;
		}
		.selection{
			padding: 0 0.346666rem;
		}
	}
}
 .wrapper {
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
	.block{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		border-radius: 0.133333rem;
		width: calc(8rem - 40px);
		height: 4rem;
		padding: 0 0.266666rem;
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e9f5), color-stop(30%, #bcc8ec), color-stop(100%, #f5f7fd));
		p{
			line-height: 0.64rem;
			text-align: justify;
			font-weight: bold;
			letter-spacing: 2px;
		}
	}
  }
</style>
<style type="text/css">
.van-radio{
	margin-bottom: 0.133333rem;
}
.van-button{
	margin-top: 0.266666rem !important;
}
</style>